<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">{{ title }}巡查</view>
			<view class="right"></view>
		</view>
		<!--检查列表-->
		<view v-for="(item, index) in list" :key="index" @click="toDetail(index)" class="card list flex-row">
			<view class="left">{{ index+1 }}</view>
			<view class="center">{{ item.content }}</view>
			<view class="right">
				<image v-if="item.pics" :src="item.pics.split(',')[0]"></image>
				<uni-icons v-else type="checkbox" size="30" color="#5F96F2"></uni-icons>
			</view>
		</view>
		
		<!--巡检情况-->
		<view class="card">
			<view class="title">
				<view class="name">巡检情况</view>
			</view>
			<view class="item">
				<textarea v-model="form.content" placeholder="巡检情况" />
			</view>
			<view class="title">
				<view class="name">巡检视图</view>
			</view>
			<view class="item" style="height: 120upx;">
				<upload v-if="check_pics.length" :files="check_pics" :count="3" showBtn="false" icon="false"></upload>
			</view>
			<view class="title">
				<view class="name">巡检人签字</view>
			</view>
			<view class="item">
				<view v-if="check_sign_url" class="sign-image">
					<image :src="check_sign_url"></image>
				</view>
			</view>
		</view>
		
		<!--陪同情况-->
		<view class="card">
			<view class="title">
				<view class="name">陪同视图</view>
			</view>
			<view class="item" style="height: 120upx;">
				<upload v-if="accom_pics.length" :files="accom_pics" :count="3" showBtn="false" icon="false"></upload>
			</view>
			<view class="title">
				<view class="name">陪同人签字</view>
			</view>
			<view class="item">
				<view v-for="(item, index) in accom_sign_url" :key="index" class="sign-image">
					<image :src="item"></image>
				</view>
			</view>
		</view>
		<view class="btns">
			<view @click="goBack" class="btn">返回</view>
		</view>
	</view>
</template>

<script>
import upload from '@/components/upload/index.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { date } from '@/common/function.js';

export default{
	components: { upload,uniIcons },
	data(){
		return {
			id: '',
			title: '',
			list: [],
			form: {},
			check_pics: [],		// 巡检人视图
			accom_pics: [],		// 陪同人视图
			check_sign_url: '',	// 巡查人签字
			accom_sign_url: []	// 陪同人签字
		}
	},
	onLoad(option){
		this.id = option.id;
		this.title = option.title;
		this.getList(option.id);
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toDetail(index){
			uni.removeStorageSync('riskInspectList');
			uni.setStorageSync('riskInspectList', this.list);
			uni.navigateTo({url: 'riskSpecialCheckLook?index='+index});
		},
		getList(id){
			let _this = this;
			uni.request({
				url: this.$API.riskSpecialDetail,
				data: {id},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.form = res.data.data;
					
					// 处理数据
					_this.check_pics = _this.form.pics.split(',');
					_this.check_pics = _this.check_pics.map(item=>_this.$API.baseURL + item);
					_this.accom_pics = _this.form.peitong_pics.split(',');
					_this.accom_pics = _this.accom_pics.map(item=>_this.$API.baseURL + item);
					_this.check_sign_url = _this.form.xunjian_sign.split(',');
					_this.accom_sign_url = _this.form.peitong_sign.split(',');
					_this.list = JSON.parse(_this.form.detail_list);
				}
			});
		}
	}
}
</script>

<style scoped>
textarea{
	width: 100%;
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 32upx;
	position: relative;
}
.card .item{
	margin-bottom: 20upx;
}

.card.list{
	padding: 20upx;
}
.card>.left{
	color: #000;
	width: 70upx;
	font-size: 40upx;
	font-weight: bold;
	padding-left: 10upx;
	box-sizing: border-box;
}
.card>.right{
	width: 100upx;
	text-align: right;
	padding-right: 10upx;
	box-sizing: border-box;
}
.card>.right image{
	width: 70upx;
	height: 70upx;
	border-radius: 10upx;
}
.card>.center{
	width: calc(100% - 170upx);
	border: 4upx dotted #fff;
	box-sizing: border-box;
	border-radius: 10upx;
	line-height: 1.2;
	font-size: 28upx;
	padding: 10upx;
}
.card>.center.error{
	border: 4upx dotted red;
}

.btn{
	color: #fff;
	width: 260upx;
	height: 52upx;
	margin: 40upx auto 0;
	font-size: 30upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	background-color: red;
}
.btns .btn{
	margin: 40upx auto;
}
.sign-image{
	width: 100%;
	height: 300upx;
	margin-bottom: 20upx;
	background: #F0F0F0;
}
.sign-image image{
	width: 100% !important;
	height: 100% !important;
}
</style>
